<template>
  <div class="component-test">
    <div class="container">
      <h1>组件测试页面</h1>
      <p>这个页面用于测试新的UI组件是否正常工作</p>

      <!-- 按钮测试 -->
      <section class="test-section">
        <h2>按钮组件测试</h2>
        <div class="button-grid">
          <BaseButton type="primary" size="large">主要按钮</BaseButton>
          <BaseButton type="secondary" size="large">次要按钮</BaseButton>
          <BaseButton type="success" size="large">成功按钮</BaseButton>
          <BaseButton type="warning" size="large">警告按钮</BaseButton>
          <BaseButton type="error" size="large">错误按钮</BaseButton>
          <BaseButton type="primary" size="large" :loading="loading" @click="toggleLoading">
            {{ loading ? '加载中...' : '点击加载' }}
          </BaseButton>
        </div>
      </section>

      <!-- 输入框测试 -->
      <section class="test-section">
        <h2>输入框组件测试</h2>
        <div class="input-grid">
          <BaseInput
            v-model="testForm.username"
            label="用户名"
            placeholder="请输入用户名"
            prefix-icon="User"
            clearable
          />
          <BaseInput
            v-model="testForm.password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
          />
          <BaseInput
            v-model="testForm.email"
            type="email"
            label="邮箱"
            placeholder="请输入邮箱"
            prefix-icon="Message"
            clearable
          />
        </div>
      </section>

      <!-- 对话框测试 -->
      <section class="test-section">
        <h2>对话框组件测试</h2>
        <div class="dialog-buttons">
          <BaseButton type="primary" @click="showTestDialog = true">
            打开测试对话框
          </BaseButton>
          <BaseButton type="success" @click="showLoginForm = true">
            打开登录表单
          </BaseButton>
        </div>
      </section>

      <!-- 表单数据显示 -->
      <section class="test-section">
        <h2>表单数据</h2>
        <pre>{{ JSON.stringify(testForm, null, 2) }}</pre>
      </section>
    </div>

    <!-- 测试对话框 -->
    <BaseDialog
      v-model:visible="showTestDialog"
      title="测试对话框"
      icon="User"
      width="400px"
    >
      <p>这是一个测试对话框，用于验证BaseDialog组件是否正常工作。</p>
      <p>对话框包含了标题、图标、内容区域和按钮。</p>
    </BaseDialog>

    <!-- 登录表单测试 -->
    <LoginForm
      v-model="showLoginForm"
      @success="handleLoginSuccess"
      @switch-to-register="handleSwitchToRegister"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import BaseButton from '../components/common/BaseButton.vue'
import BaseInput from '../components/common/BaseInput.vue'
import BaseDialog from '../components/common/BaseDialog.vue'
import LoginForm from '../components/auth/LoginForm.vue'

// 响应式数据
const loading = ref(false)
const showTestDialog = ref(false)
const showLoginForm = ref(false)

const testForm = reactive({
  username: '',
  password: '',
  email: ''
})

// 方法
const toggleLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('加载完成！')
  }, 2000)
}

const handleLoginSuccess = () => {
  ElMessage.success('登录成功！')
}

const handleSwitchToRegister = () => {
  ElMessage.info('切换到注册页面')
}
</script>

<style scoped>
.component-test {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-secondary);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

h1 {
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

h2 {
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-sm);
}

.test-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.dialog-buttons {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

pre {
  background: var(--color-bg-tertiary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  overflow-x: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .button-grid {
    grid-template-columns: 1fr;
  }
  
  .input-grid {
    grid-template-columns: 1fr;
  }
  
  .dialog-buttons {
    flex-direction: column;
  }
  
  .test-section {
    padding: var(--spacing-lg);
  }
}
</style>
